<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="会员充值"></tui-navigation-bar>

    <section class="card primary-box">
      <view class="card-title">
        <my-icon name="store" size="20" :color="$variables.gold"></my-icon>
        <view class="primary-title ml-10 font-weight-bold">{{ $format(loginInfo, 'pt_name', '暂未获取到') }}</view>
      </view>
      <view class="card-content">
        <my-row>
          <view slot="title" class="primary-grey-text">账户余额</view>
          <view slot="value" class="primary-grey-text text-price">{{ $format(memberAccount, 'money', 0) }}</view>
        </my-row>
        <my-row>
          <view slot="title" class="primary-grey-text">代金卡余额</view>
          <view slot="value" class="primary-grey-text text-price">{{ $format(memberAccount, 'cardtotal', 0) }}</view>
        </my-row>
        <!-- <my-row>
          <view slot="title" class="primary-grey-text">会员卡到期时间</view>
          <view slot="value" class="primary-grey-text">{{ memberInfo.endtime }}</view>
        </my-row> -->
      </view>
    </section>

    <section>
      <view class="link-content">
        <view class="link-title">充值套餐</view>
      </view>

      <view v-if="rechargeCardList && rechargeCardList.length > 0" class="recharge-content">
        <block v-for="rechargeCard in rechargeCardList" :key="rechargeCard.id">
          <view @tap="handleRecharge(rechargeCard)" class="recharge-item primary-box" hover-class="hover-jump">
            <span v-if="$format(rechargeCard, 'cardtype') !== 4">充{{ rechargeCard.money }}元</span>
            <span class="text-align-center">{{ rechargeCard.title }} </span>
          </view>
        </block>
      </view>
      <view v-else class="mb-20 primary-grey-text fs-sm">暂无更多充值套餐数据</view>
    </section>

    <!-- 自定义充值 -->
    <modal-recharge ref="rechargeModal" @submit="handleRecharge"></modal-recharge>

    <my-loading ref="loading"></my-loading>
  </view>
</template>

<script>
import recharge from '@/pages/recharge/mixins/recharge'
export default {
  mixins: [recharge],
  data() {
    return {
      $variables: this.$variables,
      memberInfo: null, // 会员信息
      memberAccount: null // 会员权益
    }
  },
  computed: {
    loginInfo() {
      return this.$store.getters.loginInfo
    }
  },
  onLoad() {},
  onShow() {
    this.handleInit()
  },
  onPullDownRefresh() {
    this.$refs.loading.open()
    this.handleInit()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.$refs.loading.close()
    }, 300)
  },
  methods: {
    handleInit() {
      try {
        this.initLoginInfo().then(async res => {
          this.finalGetRechargeCardList()
          this.memberAccount = await this.getMemberAccount()
        })
      } catch (err) {
        console.err(err)
      }
    },
    // 用户信息
    async finalGetMemberInfo() {
      try {
        const res = await this.getMemberInfo()
        this.memberInfo = this.$format(res, 'data')
      } catch (err) {
        console.err('getMemberInfo', err)
        this.$msg('text', this.$format(err, 'msg', '获取用户数据失败'))
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 首页/会员充值 - 充值套餐
.recharge {
  &-content {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
  &-item {
    @include bg-red;
    @include is-flex(column, center, center, nowrap);
    border-radius: 7px;
    padding: 15px;
    height: 95px;
    overflow: hidden;
    & > span:nth-child(1) {
      color: $color-primary-text;
      font-weight: bold;
    }
    & > span:nth-child(2) {
      margin-top: 5px;
      color: $color-primary-grey-text;
      font-size: $font-size-xxs;
    }
  }
}

.page {
  padding: 15px;
  .card {
    font-size: $font-size-base;
    border-radius: 5px;
    padding: 0;
    margin-bottom: 25px;
    &-title {
      @include is-flex(row, flex-start, center, wrap);

      padding: 15px 15px;
    }
    &-content {
      @include border-top;
      padding: 10px 15px;
      ::v-deep .row {
        padding: 5px 0;
      }
    }
  }
}
</style>
